<template>
  <div class="info">
    <hmNavbar title="我的资料" @back="back"></hmNavbar>
    <div class="main">
      <van-cell
        title="头像"
        is-link
        class="avatarItem"
        center
        @click="goEdit('avatar')"
      >
        <template #default>
          <div class="avatar">
            <img :src="baseURL + user.avatar" alt="" />
          </div>
        </template>
      </van-cell>
      <van-cell-group class="infoGroup">
        <van-cell
          title="昵称"
          is-link
          :value="user.nickname"
          center
          @click="goEdit('nickname')"
        ></van-cell>
        <van-cell
          title="性别"
          is-link
          :value="genderobj[user.gender]"
          @click="openGender"
        ></van-cell>
        <van-cell
          title="地区"
          is-link
          :value="areaList.city_list[user.area]"
          @click="opneArea"
        ></van-cell>
        <van-cell
          title="个人简介"
          is-link
          :value="user.intro"
          @click="goEdit('intro')"
        ></van-cell>
      </van-cell-group>
      <van-button type="default" size="large" class="myBTN" @click="logout"
        >退出登录</van-button
      >
    </div>
    <!-- 性别按钮弹出 -->
    <van-popup v-model="showGender" position="bottom">
      <van-picker
        v-if="show"
        show-toolbar
        :columns="columns"
        @confirm="genderConfirm"
        @cancel="genderCancel"
        :default-index="user.gender"
      />
    </van-popup>
    <!-- 地区按钮弹出 -->
    <van-popup v-model="showArea" position="bottom">
      <van-area
        v-if="show"
        :area-list="areaList"
        :value="user.area"
        :columns-num="2"
        @confirm="areaConfirm"
        @cancel="areaCancel"
      />
    </van-popup>
  </div>
</template>

<script>
// 导入axios请求
import { editUser } from '../../../api/login.js'
// 导入token工具
import { removeToken } from '../../../utils/localStorage'
// 导入vant官方地区数据
import { areaList } from '@vant/area-data'
// 导入辅助函数
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'info',
  data () {
    return {
      baseURL: process.env.VUE_APP_BaseURL,
      areaList,
      showGender: false,
      // 性别弹框的数据
      columns: ['未知', '男', '女'],
      // 地区修改数据
      showArea: false,
      show: true // 静默刷新
    }
  },
  computed: {
    ...mapState(['user', 'genderobj'])
  },
  methods: {
    ...mapMutations(['setUser', 'setLogin']),
    ...mapActions(['setUserInfo']),
    // 昵称修改页面跳转
    goEdit (prop) {
      this.$router.push('/editInfo?prop=' + prop)
    },
    // 地区框取消
    areaCancel () {
      this.showArea = false
    },
    // 地区框确认
    async areaConfirm (arr) {
      console.log(arr)
      // 提示用户
      this.$toast({
        type: 'loading',
        duration: 0,
        message: '加载中'
      })
      // 发起修改请求
      await editUser({
        area: arr[1].code
      })
      // 重新获取数据
      this.setUserInfo()
      // 关闭面板
      this.showArea = false
      this.$toast.clear()
    },
    // 打开地区选项框
    opneArea () {
      this.showArea = true
      // 静默刷新的代码
      this.show = false
      setTimeout(() => {
        this.show = true
      }, 100)
    },
    // 打开性别选项框
    openGender () {
      this.showGender = true
      // 静默刷新的代码
      this.show = false
      setTimeout(() => {
        this.show = true
      }, 100)
    },
    // 性别框取消
    genderCancel () {
      this.showGender = false
    },
    // 性别框确认
    async genderConfirm (value, index) {
      this.$toast({
        type: 'loading',
        duration: 0,
        message: '加载中'
      })
      // 发起请求
      await editUser({
        gender: index
      })
      // 用actions 重新获取vuex
      this.$store.dispatch('setUserInfo')
      // 关闭窗口
      this.showGender = false
      this.$toast.clear()
    },
    // 返回按钮
    back () {
      this.$router.push('/my')
    },
    // 退出登录
    logout () {
      this.$dialog
        .confirm({
          title: '退出登录',
          message: '请确认是否确认退出登录'
        })
        .then(() => {
          // on confirm
          // 需要清除token
          removeToken()
          // 设置vuex中isLogin为false
          this.setLogin(false)
          // 清空user的数据
          this.setUser('')
          // 返回到登录页面
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
      // 退出登录
    }
  }
}
</script>

<style lang="less" scoped>
.info {
  height: 100vh;
  background-color: #f7f4f5;
  .main {
    margin-top: 18px;
    padding: 0 15px;
    .avatarItem {
      line-height: 0;
      border-radius: 6px;
      .avatar {
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
      }
    }
    .infoGroup {
      margin: 10px 0 15px;
      border-radius: 6px;
      overflow: hidden;
    }
    .myBTN {
      border: none;
      font-weight: bold;
      font-size: 16px;
      color: #e40137;
      // color: @color;
    }
  }
}
</style>
